<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哆啦A梦</title>
    <style>
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="demo1"></div>
    <style id="demo2"></style>
    <div id="buttons">
        <button id="btnPause">暂停</button>
        <button id="btnPlay">播放</button>
        <button id="btnSlow">慢速</button>
        <button id="btnFast">快速</button>
    </div>
    <style>
        *{box-sizing: border-box;}
        *::before *::after{box-sizing: border-box;}
        #html{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50vh;
        }
        #demo1{
            position: fixed;
            height: 32vh;
            top: 0;
            left: 0;
            width: 100%;
            
           
            overflow-y: auto;
        }
        #demo1::-webkit-scrollbar{
            display: none;
        }
        #demo2{
            display: none;
        }
        #buttons{
            position: fixed;
            right: 0;
            top: 0;
            z-index: 6;
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            margin-right:10px ;
        }
        #buttons>button{
            margin-bottom: 10px;
        }
    </style>
    <div id="html">
        <div class="doraemon">
            <div class="head">
              <div class="eye-wrap left">
                <div class="eye">
                  <div class="pupil"></div>
                </div>
              </div>
              <div class="eye-wrap right">
                <div class="eye">
                  <div class="pupil"></div>
                </div>
              </div>
              <div class="nose"></div>
              <ul class="mustache-list left">
                <li></li>
                <li></li>
                <li></li>
              </ul>
              <ul class="mustache-list right">
                <li></li>
                <li></li>
                <li></li>
              </ul>
              <div class="mouth">
                <div class="dimple"></div>
                <div class="philtrum"></div>
                <div class="lips"></div>
              </div>
            </div>
            <div class="necklace">
              <div class="drop">
                <div class="drop-line"></div>
                <div class="drop-line"></div>
              </div>
            </div>
            <div class="body">
              <div class="arm left"></div>
              <div class="arm right"></div>
              <div class="hand"></div>
              <div class="stomach">
                <div class="pocket"></div>
              </div>
              <div class="trunk"></div>
            </div>
            <div class="footer">
              <div class="leg left">
                <div class="foot"></div>
              </div>
              <div class="right-padding"></div>
              <div class="leg right"></div>
              <div class="right foot"></div>
            </div>
          </div>
    </div>
    <script src="index.js"></script>
</body>
</html>